<template>
	<w-layout showNavbar navTitle="实名认证" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #default>
			<view class="container">
				<up-code
					:seconds="seconds" 
					ref="uCodeRef"
					@change="codeChange"
				></up-code>
				
				<view class="public-box-13 px-50 py-50" style="min-height: 900rpx;position: relative;">
					<image style="width: 200rpx;height: 200rpx;position: absolute;top: -8%;right: 2%;z-index: 99;" src="/static/image/box-13-1.png" mode=""></image>
					
					<view class="color fs-36">
						<text>提升安全</text>
						<text class="ml-10">保障权益</text>
					</view>
					
					<view class="mt-100">
						<view class="fr-ac px-20 pb-30 u-border-bottom mt-30" style="border-color: var(--gray-line) !important;">
							<view class="w-20 op-90">
								姓名
							</view>
							<view class="flex-1 ml-20">
								<input v-model="formData.name" class="w-100 color" type="text" placeholder="请输入姓名" />
							</view>
						</view>
						<view class="fr-ac px-20 pb-30 u-border-bottom mt-30" style="border-color: var(--gray-line) !important;">
							<view class="w-20 op-90">
								身份证
							</view>
							<view class="flex-1 ml-20">
								<input v-model="formData.card_num" class="w-100 color" type="idcard" maxlength="18" placeholder="请输入身份证" />
							</view>
						</view>
						<view class="fr-ac px-20 pb-30 u-border-bottom mt-30" style="border-color: var(--gray-line) !important;">
							<view class="w-20 op-90">
								手机号
							</view>
							<view class="flex-1 ml-20">
								<input v-model="formData.mobile" class="w-100 color" type="number" maxlength="11" placeholder="请输入手机号" />
							</view>
						</view>
						<view class="fr-ac px-20 pb-30 u-border-bottom mt-30" style="border-color: var(--gray-line) !important;">
							<view class="w-20 op-90">
								验证码
							</view>
							<view class="flex-1 mx-20">
								<input v-model="formData.code" class="w-100 color" type="number" maxlength="6" placeholder="请输入验证码" />
							</view>
							<view @tap="getCode" class="public-btn-6 fr-ac-jc color px-10" style="min-width: 174rpx;height: 60rpx;">
								{{tips}}
							</view>
						</view>
					</view>
					
					<view class="mt-100">
						<view @click="submit" class="public-btn-3 transition py-25 t-c flex-1">
							<view class="text-color-b fs-32">
								立即认证
							</view>
						</view>
					</view>
					
				</view>
				
				<view class="op-30 mt-50" style="line-height: 1.8;">
					为满足相关法规政策及相关主管部分的要求，我们需要收集您的姓名、身份证件号码、有关身份证明材料，以认证您的个人身份信息
				</view>
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import config from '@/common/config'
	import{
		copy
	} from '@/common/common'
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		real_name,
		send_sms
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	const page = reactive({
		scrollTop:0
	})
	
	
	
	const state = reactive({
		list:[],
		page:1,
		limit:15,
		last_limit:15,
	})
	function initData(){
		state.list = []
		state.page = 1
		state.last_limit = 15
	}
	
	const formData = reactive({
		name: '',
		card_num: '',
		mobile: '',
		code: '',
	})
	
	//验证码相关
	const tips = ref('');
	const seconds = ref(60);
	const uCodeRef = ref(null);
	const codeChange = (text) => {
		tips.value = text;
		console.log(text)
	};
	const getCode = async () => {
		if (uCodeRef.value.canGetCode) {
			if (uni.$u.test.mobile(formData.mobile)) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码',
				});
				const res = await send_sms({
					mobile: formData.mobile,
				})
				uni.hideLoading();
				// 这里此提示会被start()方法中的提示覆盖
				uni.$u.toast('验证码已发送');
				// 通知验证码组件内部开始倒计时
				uCodeRef.value.start();
			} else {
				uni.$u.toast('请先输入正确手机号');
			}
	
		} else {
			uni.$u.toast('倒计时结束后再发送');
		}
	};
	
	
	async function submit(){
		if(!formData.name){
			return uni.$u.toast('请输入姓名')
		}
		if(!uni.$u.test.idCard(formData.card_num)){
			return uni.$u.toast('请输入正确身份证')
		}
		if(!uni.$u.test.mobile(formData.mobile)){
			return uni.$u.toast('请输入正确手机号')
		}
		if(!formData.code){
			return uni.$u.toast('请输入验证码')
		}
		const res = await real_name({
			...formData
		})
		uni.$u.toast('认证成功！')
		setTimeout(() => {
			uni.navigateBack()
		},1000)
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 50rpx;
		
	}
	
	.login-btn {
		color: white !important;
		background: var(--color) !important;
		border-radius: 12rpx !important;
	}
</style>